const entryObj=require('./entries.js');//引入入口对象
const webpack = require('webpack');//引入webpack核心模块
const CopyWebpackPlugin = require('copy-webpack-plugin');//将单个文件或整个目录复制到构建目录
const HtmlWebpackPlugin = require('html-webpack-plugin');//简单创建 HTML 文件，用于服务器访问
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//将CSS提取到单独的文件中

let pluginsArr = [];//定义plugins数组
entryObj.htmlArray.forEach(item => {//遍历html数组
  pluginsArr.push(new HtmlWebpackPlugin(item));//配置HtmlWebpackPlugin的参数
});

module.exports = {
  entry: entryObj.entry,//定义多页面的入口对象
  resolve: {//解析
    extensions: ['.js', '.vue', '.json'],//自动解析确定的扩展
    alias: {//创建 import 或 require 的别名，来确保模块引入变得更简单
      'vue$': 'vue/dist/vue.esm.js',
      '@': entryObj.getProjectRoot('src'),
    }
  },
  module: {//模块
    rules: [
      {//识别scss文件
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { //保证@import引入其他样式文件的时候,重新走前面的postcss-loader
              importLoaders: 2
            }
          },
          {//为css样式添加厂商前缀
            loader: "postcss-loader"
          },
          {//将scss文件转换成css文件
            loader: 'sass-loader'
          }
        ],
      },
      {//识别css文件
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: { //保证@import引入其他样式文件的时候,重新走前面的postcss-loader
              importLoaders: 1
            }
          },
          {//为css样式添加厂商前缀
            loader: "postcss-loader"
          }
        ],
      },
      {//识别js文件 es6转es5
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {//识别html结构中的img资源 #include
        test: /\.html$/,
        use: [
          {
            loader: "html-withimg-loader"
          }
        ]
      },
      {//识别图片文件
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: "url-loader",
            //当图片小于多少k的时候用base64转化
            options: {
              esModule: false,
              limit: 10 * 1024,
              outputPath: 'img/',
              name: '[name].[hash:7].[ext]'
            }
          }
        ]
      },
      {//识别字体图标文件
        test: /\.(woff|svg|eot|ttf)\??.*$/,
        loader: 'url-loader'
      }
    ]
  },
  optimization: {//优化
    splitChunks: {//开启代码分割
      chunks: "all",
      minSize: 30000,//引入的模块 最小代码分割大小为30kb
      minChunks: 1,//当一个模块被用了至少多少次才进行代码分割
      maxAsyncRequests: 5,//同时加载的模块为5个请求
      maxInitialRequests: 3,//入口文件最多三个文件
      automaticNameDelimiter: '~',//文件生成的链接符
      name: true,//指的是让filename的名字生效
      cacheGroups: {//缓存组
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          // filename: 'vendors.js'
        },
        default: {
          priority: -20,
          reuseExistingChunk: true,//如果模块已经被打包过，再次打包直接忽略
          // filename: 'default.js'
        }
      }
    }
  },
  plugins: [//插件
    new CopyWebpackPlugin({//目录复制
      patterns: [
        {
          from: 'static',
          to: 'static'
        }
      ]
    }),
    new webpack.ProvidePlugin({//开启垫片
      $: 'jquery',//当发现一个模块中使用了$之后就会自动在该模块中引入jquery
      _: 'lodash',
      jQuery: 'jquery'
    })
  ].concat(pluginsArr),
  output: {//出口配置
    path: entryObj.getProjectRoot('dist'),//打包好的文件路径
    publicPath: '/'//公共路径
  }
};